<template>
    <el-form :model="docData" label-width="auto" style="max-width: 720px" ref="docFormRef">
    <el-form-item label="开始时间" prop="beginTime">
        <el-date-picker v-model="docData.beginTime" type="datetime" placeholder="选择开始时间" :editable=false style="width: 100%" value-format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm" date-format="YYYY-MM-DD" time-format="HH:mm"/>
    </el-form-item>

    <el-form-item label="结束时间" prop="endTime">
        <el-date-picker v-model="docData.endTime" type="datetime" placeholder="选择结束时间" :editable=false style="width: 100%" value-format="YYYY-MM-DD HH:mm"  format="YYYY-MM-DD HH:mm" date-format="YYYY-MM-DD" time-format="HH:mm"/>
    </el-form-item>  

    <el-form-item label="地址" prop="address"><el-input v-model="docData.address"/></el-form-item>  

    <div v-for="(sender) in docData.senderList" :key="sender.id">
        <el-form-item label="送检人姓名单位">
        <el-input v-model="sender.senderName" style="width: 30%" placeholder="请填写送检人姓名"/>-
        <el-input v-model="sender.company" style="width: 60%" placeholder="请填写送检人单位"/>
        </el-form-item> 
    </div>
    <el-form-item label="增加送检人" prop="senderCount">
        <el-input-number v-model="senderCount" :min="1" :max="20" @change="senderListChange" />
    </el-form-item>

    <el-form-item label="检查对象" prop="inspectObject">
        <el-input v-model="docData.inspectObject" :rows="3" type="textarea" placeholder="请输入检查对象"/>
    </el-form-item>

    <el-divider border-style="solid">检查工具部分开始</el-divider>
    <div v-for="(tool) in docData.tools" :key="tool.id">
        <el-form-item label="工具类型">
        <el-input v-model="tool.toolType"  placeholder="请填写工具类型"/>
        </el-form-item> 
        <div v-for="(subTool) in tool.subTools" :key="subTool.id">
        <el-form-item label="工具名称">
            <el-input v-model="subTool.toolName"  placeholder="请填写工具名称"/>
        </el-form-item>            
        </div>
        <el-form-item label="增加工具">
        <el-input-number v-model="tool.subToolCount" :min="1" :max="20" @change="subToolChange(tool)" />
        </el-form-item>
        <el-divider border-style="solid" />
    </div>        
    <el-form-item label="增加工具类型">
        <el-input-number v-model="toolCount" :min="1" :max="20" @change="toolChange" />
    </el-form-item>
    <el-divider border-style="solid">检查工具部分结束</el-divider>

    <el-form-item label="检查对象描述" prop="inspectObjectDesc">
        <el-input v-model="docData.inspectObjectDesc" :rows="3" type="textarea" placeholder="请输入检查对象描述"/>
    </el-form-item>

    <el-divider border-style="solid">检查过程方法</el-divider>
    <div v-for="(inspectMethod) in docData.inspectMethods" :key="inspectMethod.id">
        <el-form-item label="检查过程方法">
        <el-input v-model="inspectMethod.methodDesc" placeholder="请填写检查过程方法" :rows="3" type="textarea"/>
        </el-form-item>
    </div>
    <el-form-item label="增加一条检查方法">
        <el-input-number v-model="inspectMethodsCount" :min="1" :max="20" @change="inspectMethodsChange" />
    </el-form-item>

    <el-form-item label="检查结果" prop="inspectResult">
        <el-input v-model="docData.inspectResult" :rows="3" type="textarea" placeholder="请输入检查结果"/>
    </el-form-item>

    <el-form-item label="指挥人员" prop="commander">
        <el-input v-model="docData.commander" placeholder="请输入指挥人员"/>
    </el-form-item>

    <el-form-item label="侦察人员" prop="scouter">
        <el-input v-model="docData.scouter" placeholder="请输入侦察人员"/>
    </el-form-item>

    <el-form-item label="记录人员" prop="recorder">
        <el-input v-model="docData.recorder" placeholder="请输入记录人员"/>
    </el-form-item>

    <el-form-item>
        <el-button type="primary" @click="submitDocForm()">提交下载文档</el-button>
        <el-button @click="resetForm(docFormRef)">重置表单</el-button>
    </el-form-item>
    </el-form>    
</template>

<script setup>
  import { reactive, ref} from 'vue';
  import showTips from "../api/Toast.js";
  import download from "../api/Download.js";
  import service from "../api/Service.js";

  const docFormRef = ref();

  const senderCount = ref(1);
  const senderCountCache = ref(1);
  const toolCount = ref(1);
  const toolCountCache = ref(1);
  const inspectMethodsCount = ref(1);
  const inspectMethodsCountCache = ref(1);

  const docData = reactive({
    templateId:"bilu",
    beginTime:"",
    endTime:"",
    address:"",
    senderList:[{"id":"1","senderName":"","company":""}],
    inspectObject:"",
    tools:[{"id":1,"toolType":"", "subToolCount":1,"subToolCountCache":1,"subTools":[{"id":1,"toolName":""}]}],
    inspectObjectDesc:"",
    inspectMethods:[{"id":1, "methodDesc":""}],
    inspectResult:"",
    commander:"",
    scouter:"",
    recorder:""
  });

  const submitDocForm = () => {
    if(checkFields() == false){
        return;
    }
    var baseUrl = "/bilu/service.do";
    service.post(baseUrl,docData, {responseType:"blob"})
      .then(response => {        
        const blobData = response.data;                  
        if(blobData.type==="application/octet-stream"){
          download(blobData, "bilu.docx");
        }else{          
          const responseText = blobData.text();
          responseText.then((res) => {
            var error = JSON.parse(res);  
            showTips(error.message);
          });
        }
      }).catch(error => {
        showTips(error.message);
      });    
  };

  const resetForm = (form) => {
    form.resetFields();
    senderCount.value = 1;
    senderCountCache.value = 1;
    toolCount.value = 1;
    toolCountCache.value = 1;
    inspectMethodsCount.value = 1;
    inspectMethodsCountCache.value = 1;
    docData.senderList = [{"id":"1","senderName":"","company":""}];
    docData.tools = [{"id":1,"toolType":"", "subToolCount":1,"subToolCountCache":1,"subTools":[{"id":1,"toolName":""}]}];
    docData.inspectMethods = [{"id":1, "methodDesc":""}];
  };

  const senderListChange = () => {
    if(senderCountCache.value < senderCount.value){
      docData.senderList.push({
        "id": senderCount.value,
        "senderName":"",
        "company":""
      });
    }else{
      docData.senderList.splice(senderCount.value, 1);
    }
    senderCountCache.value = senderCount.value;
  };

  const subToolChange = (currentTool) => {
    if(currentTool.subToolCountCache < currentTool.subToolCount){
      currentTool.subTools.push({
        "id":currentTool.subToolCount,
        "toolName":""
      });
    }else{
      currentTool.subTools.splice(currentTool.subToolCount, 1);
    }
    currentTool.subToolCountCache = currentTool.subToolCount;
  };

  const toolChange = () => {
    if(toolCountCache.value < toolCount.value){
      docData.tools.push({
        "id": senderCount.value,
        "toolType":"",
        "subToolCount":1,
        "subToolCountCache":1,
        "subTools":[{"id":1,"toolName":""}]
      });
    }else{
      docData.tools.splice(toolCount.value, 1);
    }
    toolCountCache.value = toolCount.value;
  };

  const inspectMethodsChange = () => {
    if(inspectMethodsCountCache.value < inspectMethodsCount.value){
      docData.inspectMethods.push({
        "id": inspectMethodsCount.value,
        "methodDesc":""
      });
    }else{
      docData.inspectMethods.splice(inspectMethodsCount.value, 1);
    }
    inspectMethodsCountCache.value = inspectMethodsCount.value;
  };  

  const checkFields = () => {
    if(docData.beginTime == ""){
        showTips("请选择开始时间");
        return false;
    }
    if(docData.endTime == ""){
        showTips("请选择结束时间");
        return false;
    }
    if(docData.beginTime > docData.endTime){
        showTips("开始时间不能晚于结束时间");
        return false;
    }
    if(docData.address == ""){
        showTips("请填写地址");
        return false;
    }
    if(docData.inspectObject == ""){
        showTips("请填写检查对象");
        return false;
    }
    return true;
  };
</script>
